Vue.component("my-header",{
    template: `
    <header>
        <div class="c900 flex">
            <a href="index.html"><h1>天下行汽车租赁平台</h1></a>
            <span class="flex">
                <el-input v-model="model" placeholder="搜索关键字" style="width: 250px">
                    <el-button @click="search" slot="append" icon="el-icon-search"></el-button>
                </el-input>
                <a href="addCar.html">添加车辆</a>
<!--                <template v-if="myinfo">-->
<!--                     <a><el-avatar :src="myinfo.headimg"></el-avatar></a>-->
<!--                    <a href="javaScript:;">-->
<!--                        <el-dropdown show-timeout="50" >-->
<!--                          <span style="font-size: 16px;color: #fff;">-->
<!--                            {{myinfo.cname}}<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
<!--                          </span>-->
<!--                          <el-dropdown-menu slot="dropdown">-->
<!--                            <el-dropdown-item @click.native="location.href='Userinfo.html?id=' + myinfo.id">个人信息中心</el-dropdown-item>-->
<!--                            <el-dropdown-item @click.native="location.href='password.html?id=' + myinfo.id">修改密码</el-dropdown-item>-->
<!--                            <el-dropdown-item @click.native="location.href='orders.html'">我的订单</el-dropdown-item>-->
<!--                          </el-dropdown-menu>-->
<!--                        </el-dropdown>-->
<!--                    </a>-->
<!--                    <a href="txx/user/logout">退出</a>-->
<!--                </template>-->
<!--                <template v-else>-->
<!--                    <a href="register.html">注册</a>-->
<!--                    <a href="login.html">登录</a>-->
<!--                </template>-->
                <login>
<!--                    <template #nologin>-->
<!--                        <el-link >注册</el-link>-->
<!--                        <el-link >登录</el-link>-->
<!--                    </template>-->
                    <template #logined="scope">
                        <a><el-avatar :src="scope.user.headimg"></el-avatar></a>
                        <a href="javaScript:;">
                            <el-dropdown show-timeout="50" >
                              <span style="font-size: 16px;color: #fff;">
                                {{scope.user.cname}}<i class="el-icon-arrow-down el-icon--right"></i>
                              </span>
                              <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item @click.native="location.href='Userinfo.html?id=' + scope.user.id">个人信息中心</el-dropdown-item>
                                <el-dropdown-item @click.native="location.href='password.html?id=' + scope.user.id">修改密码</el-dropdown-item>
                                <el-dropdown-item @click.native="location.href='orders.html'">我的订单</el-dropdown-item>
                              </el-dropdown-menu>
                            </el-dropdown>
                        </a>
                        <a href="txx/user/logout">退出</a>                 
                    </template>
                </login>
            </span>
        </div>
    </header>
    `,
    data(){
       return {
           model:"",
           myinfo:null
       }
    },
    methods:{
        search(){
            if (this.$listeners.find) {
                // 如果父对象有监听 find 事件, 那么发布事件
                // 触发自定义事件,通知父组件
                this.$emit("find",this.model);
            } else {
                // 执行默认的行为, => 跳转首页, 带去查询条件
                location.href="index.html?model="+this.model;
            }

        }
    },
    created(){
        axios.get("/lg/myinfo").then(res=> {
            this.myinfo = res.data.data;
            this.$emit("login",this.myinfo);
        });
    }
});